<template>
  请输入书籍关键字：
  <input type="text" v-model="mytest"><br>
  查询结果：
  <ul>
      <li v-for="(item, index) in list" :key="index">
          {{ item }}
      </li>
  </ul>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { onMounted, watch } from '@vue/runtime-core'
export default {
    setup () {
        const state = reactive({
            mytest: '',
            lists: [],
            list: []
        })

        onMounted(() => {
            fetch('/class4/test4-5.json')
                .then(res => res.json())
                .then(res=>{
                    state.lists=res.list
                    state.list=res.list
                    console.log(state.list)
                })
        })

        watch(()=>state.mytest,()=>{
            state.list = state.lists.filter(item=>item.includes(state.mytest))
        })

        return {
            ...toRefs(state)
        }
    }
}
</script>

<style>

</style>